<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home/statistics' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类列表</el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-button @click="addCate" size="mini" style="margin:20px 20px" type="primary" round>添加分类</el-button>
      </template>
  <el-main>
<el-table v-loading="loading" :data="categoryList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column align="center" label="#" type="index"  width="160"></el-table-column>
    <el-table-column align="center" prop="pid"  label="父级ID" width="160"></el-table-column>
    <el-table-column align="center" prop="name" label="分类名称" width="160"></el-table-column>
    <el-table-column align="center"  label="分类层级" width="160">
      <template slot-scope="scope">
         <el-tag v-if="scope.row.level === 1">{{ scope.row.level + '级' }}</el-tag>
         <el-tag v-else type="success">{{ scope.row.level + '级' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center"  label="分类状态" width="160">
      <template slot-scope="scope">
        <el-switch @change="changeCategorySatatus(scope.row.id)" v-model="scope.row.status" :active-value="1" :inactive-value="0" >
</el-switch>

      </template>
    </el-table-column>
    <el-table-column align="center"  label="操作" >
      <template slot-scope="scope">
           <el-button @click="openEditCateDialog(scope.row.id)" type="primary" size="mini" icon="el-icon-edit" ></el-button>
      </template>
    </el-table-column>


  </el-table>

  <!-- 修改分类弹窗 -->

  <el-dialog title="修改分类" width="25%" :visible.sync="dialogFormVisibleCateEdit">
  <el-form :model="editForm">
    <el-form-item label="父级ID" label-width="70px" >
      <el-input v-model="editForm.pid"></el-input>
    </el-form-item>
    <el-form-item label="分类名称" label-width="70px" >
      <el-input v-model="editForm.name" ></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleCateEdit = false">取 消</el-button>
    <el-button type="primary" @click="editCategorySubmit">确 定</el-button>
  </div>
</el-dialog>

<!-- 添加分类弹窗 -->
<el-dialog title="添加分类" width="25%" :visible.sync="dialogFormVisibleCateAdd">
  <el-form :model="addForm">
    <el-form-item label="父级ID" label-width="70px" >
      <el-input v-model="addForm.pid"></el-input>
    </el-form-item>
    <el-form-item label="分类名称" label-width="70px" >
      <el-input v-model="addForm.name" ></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleCateAdd = false">取 消</el-button>
    <el-button type="primary" @click="addCategorySubmit">确 定</el-button>
  </div>
</el-dialog>

  </el-main>
    </div>
</template>

<script>
import {getCateGory,changeStatus,getCateDetail,editCategory,addCategory } from '../../api/category'
export default {
  name: "Statistics",
  data(){
    return{
     categoryList:[],
     dialogFormVisibleCateEdit:false,
     dialogFormVisibleCateAdd:false,
     currentCateId:null,
     loading:false,
     editForm:{
       pid:null,
       name:''
     },
     addForm:{
       pid:null,
       name:''
     }
    }
  },
  mounted(){
    this.getCateGoryData()
  },
  methods:{
    async getCateGoryData(){
      this.loading =true
      const res = await getCateGory()
      if(res && res.status === 200){
        this.loading = false
        this.categoryList = res.data
      }
    },
    //  修改状态
    async changeCategorySatatus(id){
      const res = await changeStatus(id)
      console.log(res)
      if(res && res.status === 204){
        this.$message.success('操作成功')
        this.getCateGoryData()
      }else{
        this.getCateGoryData()
      }
    },

    // 打开修改弹窗
    async openEditCateDialog(id){
      this.currentCateId = id
      const res = await getCateDetail(id)
      if(res && res.status === 200){
        this.editForm = res.data
        this.dialogFormVisibleCateEdit =true
      }
      console.log(res)
    },
    // 提交修改状态
    async editCategorySubmit(){
      const res = await editCategory(this.currentCateId,this.editForm)
      if(res && res.status === 204){
        this.dialogFormVisibleCateEdit = false
        this.$message.success('更新成功')
        this.getCateGoryData()
      }else{
        this.dialogFormVisibleCateEdit = false
        this.getCateGoryData()
      }
      
    },
    // 打开添加分类弹窗
    addCate(){
      this.dialogFormVisibleCateAdd = true
    },
    // 提交添加分类
    async addCategorySubmit(){
      const res = await addCategory(this.addForm)
      if(res && res.status === 201){
        this.dialogFormVisibleCateAdd = false
        this.$message.success('创建成功')
        this.getCateGoryData()
        this.addForm = {}
      }else{
        let errorMessage = res.data.errors.name[0]
        this.$message.error(errorMessage)
      }
    }
  }
}
</script>
<style  lang="css">
.el-breadcrumb{
  /*margin-left: 20px;*/
  padding:20px 0 0 20px;
}


</style>